<template>
	<view class="">
		<swiper indicator-dots="true" indicator-active-color="#92dd6b" 	autoplay="true" circular="true">
		  <swiper-item>
		    <image src="/static/img/swiper2.png" mode="scaleToFill"/>
		  </swiper-item>
		  <swiper-item>
		    <image src="/static/img/swiper3.png" mode="scaleToFill"/>
		  </swiper-item>
		</swiper>
		
		
		<view class="choice">
		  <view class="choice_item">
		    <view>
		      <text class="iconfont icon-fl-renyuan"></text>
		    </view>
		    <rich-text nodes="<h5>附近回收员</h5>" />
		  </view>
		  <view class="choice_item">
		      <view>
		        <text class="iconfont icon-dingwei"></text>
		      </view>
		    <rich-text nodes="<h5>最近回收站</h5>" />
		  </view>
		  <view class="choice_item">
		    <view>
		      <text class="iconfont icon-lipeixuzhi"></text>
		    </view>
		    <rich-text nodes="<h5>回收须知</h5>" />
		  </view>  
		</view>
		
		<view class="map">
			<map :latitude="latitude" :longitude="longitude"  :markers="markers"></map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude:19.27638, // 用户当前的纬度
				longitude:110.52064, // 用户当前的经度
				markers:[
					{
						id:1,
						latitude: 20.27038,
						longitude:109.50064,
						width:50,
						height:50,
						callout:{
						  color:'#ffffff',
						  content:'海南软件职业技术学院\n手机号:10086',
						  fontSize:10,
						  borderRadius:5,
						  bgColor:'#FF0000',
						  padding:20,
						  textAlign:'left',
						  display:"BYCLICK"
						}
				  },
				  {
						id:2,
						latitude: 15.27638,
						longitude:120.52064,
						width:50,
						height:50,
						callout:{
						  color:'#ffffff',
						  content:'海南软件职业技术学院\n手机号:10086',
						  fontSize:10,
						  borderRadius:5,
						  bgColor:'#FF0000',
						  padding:20,
						  textAlign:'left',
						  display:"BYCLICK"
						}
				  },
				  {
						id:3,
						latitude: 19.20638,
						longitude:109.52064,
						width:30,
						height:30,
						callout:{
						  color:'#ffffff',
						  content:'海南软件职业技术学院\n手机号:10086',
						  fontSize:10,
						  borderRadius:5,
						  bgColor:'#FF0000',
						  padding:20,
						  textAlign:'left',
						  display:"BYCLICK"
					}
				  },
				  {
						id:4,
						latitude: 19.27638,
						longitude:110.52064,
						width:50,
						height:50,
						callout:{
						  color:'#ffffff',
						  content:'海南软件职业技术学院\n手机号:10086',
						  fontSize:10,
						  borderRadius:5,
						  bgColor:'#FF0000',
						  padding:20,
						  textAlign:'left',
						  display:"BYCLICK"
					}
				  },
				]
			}
		},
		// 生命周期函数
		onLoad(){
			// 定位到当前位置的地图视口
			uni.getFuzzyLocation({
			  success:res=>{
				this.setData({
				  latitude:res.latitude,
				  longitude:res.longitude
				})
			  },
			})
		},
		methods: {

		}
	}
</script>

<style>
	image{
	  width: 100%;
	  height: 100%;
	}
	
	.choice{
	  margin-top: 30rpx;
	  height: 200rpx;
	  background-color: white;
	  border-radius: 10%;
	  display: flex;
	  justify-content: space-around;
	}
	.choice .choice_item{
	  box-shadow: 1px 10px 20px 2px rgba(0, 0, 0, .3);
	  margin-top: 20rpx;
	  width: 180rpx;
	  height: 150rpx;
	  border-radius: 10%;
	  text-align: center;
	}
	.choice_item view{
	  padding-top: 5px;
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 50%;
	  margin: 10px 0px 0px 50rpx;
	}
	.choice .choice_item:nth-child(1) view{
	  background-color: green;
	}
	.choice .choice_item:nth-child(2) view{
	  background-color: yellow;
	}
	.choice .choice_item:nth-child(3) view{
	  background-color: pink;
	}
	
	rich-text{
	  font-size: 17px;
	}
	.map{
	  margin-top: 10px;
	  height: 700rpx;
	  background-color: white;
	  border-radius: 10%;
	}
	map{
	  position: relative;
	  top: 10px;
	  margin: 10rpx 0px 0px 40rpx;
	  height: 650rpx;
	  width: 90%;
	}
</style>
